d8 函數(上)

16th鐵人賽

max1112

2024-09-22 01:02:52

128 瀏覽

分享至

函數

參數與返回值

參數:

函數可以接受零個或多個參數
參數是在函數定義時指定的變量名
實際值在函數調用時傳入

返回值:

使用return關鍵字指定函數的返回值
如果沒有指定返回值,函數默認返回undefined
return語句會立即結束函數的執行並返回指定的值


//輸入參數## 

function add(a, b) { 

  return a + b; //返回參數 

}

函數的創建與調用

函數在js屬於第一類對象(First-class Functions)，他有四個主要的特性

被賦值給變量


// 函數聲明 

function greet(name) { 

    return `Hello, ${name}!`; 

} 

  

// 將函數賦值給變量 

let sayHello = greet; 

  

console.log(sayHello("Alice")); // 輸出: Hello, Alice!

作為參數傳遞給其他函數


function operate(x, y, operation) { 

    return operation(x, y); 

} 

  

function add(a, b) { 

    return a + b; 

} 

  

function multiply(a, b) { 

    return a * b; 

} 

  

console.log(operate(5, 3, add));      // 輸出: 8 

console.log(operate(5, 3, multiply)); // 輸出: 15

作為函數的返回值


function createMultiplier(factor) { 

    return function(number) { 

        return number * factor; 

    }; 

} 

  

let double = createMultiplier(2); 

let triple = createMultiplier(3); 

  

console.log(double(5)); // 輸出: 10 

console.log(triple(5)); // 輸出: 15

被存儲在數據結構中


let mathOperations = { 

    add: (a, b) => a + b, 

    subtract: (a, b) => a - b, 

    multiply: (a, b) => a * b, 

    divide: (a, b) => a / b 

}; 

  

console.log(mathOperations.add(5, 3));      // 輸出: 8 

console.log(mathOperations.multiply(4, 2)); // 輸出: 8

除此之外，函數還有兩個值得注意的地方：

函數聲明後會被提升（hoisted），意味著可以在定義之前調用函數。
形成獨立的作用域。

函數表達式

將匿名函數賦值給變量：


let functionName = function(parameter1, parameter2, ...) { 

    // 函數體 

    return result; // 可選 

};

特點:

不會被提升，必須在定義後才能使用。
可以創建匿名函數。

箭頭函數（Arrow Function）

箭頭函數是js在ES6中引入的一種函數語法。它為JavaScript帶來了更簡潔的語法和更直觀的作用域處理，特別適合用於簡短的函數表達式和回調函數。然而，它們並不是傳統函數的完全替代，在選擇使用時需要考慮具體的使用場景和需求。


///原函數 

let functionName = (parameter1, parameter2, ...) => { 

    // 函數體 

    return result; // 可選 

}; 

  

///可以簡寫成這樣 

let functionName = (parameter1, parameter2, ...) => expression;

例子:


let multiply = (a, b) => a * b; 

  

console.log(multiply(4, 5)); // 輸出：20

綜上所述，箭頭函數帶來了這些優點:

更簡潔的語法，特別是對於簡單的函數。
詞法作用域的 this，避免了傳統函數中this綁定的問題。
適合用於函數式編程，如 map、reduce、filter 等操作。

注意事項：

箭頭函數沒有自己的 this、arguments、super 或 new.target。
不能用作構造函數。
不適合用作對象方法（除非你明確不需要方法中的 this 指向該對象）。
沒有 prototype 屬性。

方法定義

在對象字面量中定義函數，白話一點就是在一個變量中直接在中定義一個方法。


let person = { 

    name: "Alice", 

    greet() { 

        console.log(`Hello, my name is ${this.name}`); 

    } 

}; 

person.greet(); // 輸出：Hello, my name is Alice

在這個例子中，greet就是直接在person對象中定義的方法。

除此之外，他還可以在一個對象中定義多個方法。


let calculator = { 

    add(a, b) { 

        return a + b; 

    }, 

    subtract(a, b) { 

        return a - b; 

    }, 

    multiply(a, b) { 

        return a * b; 

    }, 

    divide(a, b) { 

        return a / b; 

    } 

}; 

  

console.log(calculator.add(5, 3));      // 輸出：8 

console.log(calculator.subtract(10, 4)); // 輸出：6 

console.log(calculator.multiply(2, 6)); // 輸出：12 

console.log(calculator.divide(15, 3));  // 輸出：5

ES6還允許我們使用計算屬性名來定義方法：


let methodName = "sayHello"; 

  

let greeter = { 

    [methodName]() { 

        console.log("Hello!"); 

    } 

}; 

  

greeter.sayHello(); // 輸出：Hello!

這就使得我們可以動態地定義方法名。

綜上所述，方法定義帶來了這些優點: